<template>
  <div class="auth-info">
    <el-row>

      <el-dialog title="审核不通过"
                 :visible.sync="dialogFormVisiblePa">
        <el-form :model="formPass"
                 ref="formPass"
                 :rules="rulesPass">
          <el-form-item label="不通过原因"
                        class="item-class"
                        prop="reason"
                        label-width="110px">
            <el-input v-model="formPass.reason"
                      type="textarea"
                      :rows="3"
                      maxlength="50"
                      @input="onInput(formPass.reason)"
                      placeholder="请输入不通过原因"
                      autocomplete="off"></el-input>
          </el-form-item>
          <el-col style="text-align:right;">
            <span>{{num}}/50</span>
          </el-col>
        </el-form>
        <div slot="footer"
             class="dialog-footer">
          <el-button @click="failCancel">取 消</el-button>
          <el-button type="primary"
                     @click="failSure('formPass')">确 定</el-button>
        </div>
      </el-dialog>

      <el-col :span="24">
        <el-col :span="24"
                class="audit-style">
          审核信息
        </el-col>
        <el-col :span="24"
                class="mid-contain">
          <el-form :model="form"
                   ref="form"
                   :rules="rulesForm">
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="真实姓名"
                              label-width="90px"
                              prop="user_name"
                              class="item-class">
                  <el-input v-model="form.user_name"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="手机号码"
                              label-width="90px"
                              class="item-class">
                  <el-input v-model="form.phone"></el-input>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="24">
              <el-col :span="12">
                <el-form-item label="岗位"
                              label-width="80px"
                              class="item-class">
                  <!-- <el-input v-model="form.job"></el-input> -->
                  <el-cascader ref="myCascader"
                               v-model="job_value"
                               :options="options"
                               :props="optionProps"
                               @change="handleChange"></el-cascader>
                </el-form-item>
              </el-col>
            </el-col>
            <el-col :span="12"
                    class="judge-bottom">
              <el-button @click="onPass('form')">审核通过</el-button>
              <el-button @click="onFail('form')"
                         class="fail-style">审核不通过</el-button>
              <el-button type="primary"
                         @click="onBack">返回</el-button>
            </el-col>
          </el-form>
        </el-col>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import { AccountReviewApi } from '@/services/AccountReview'
import { standardCodeApi } from '@/services/StandardCode'

export default {
  data () {
    return {
      job_value: [],
      options: [],
      optionProps: {
        value: 'id',
        label: 'name',
        children: 'children_list',
        multiple: true
      },
      num: 0,
      typeArr: [],
      companyLogoInfo: {},
      formPass: {
        reason: ''
      },
      user_reg_id: '',
      dialogFormVisiblePa: false,
      form: {
        user_reg_id: this.$route.query.user_reg_id,
        user_name: '',
        phone: '',
        job: '',
        status: this.$route.query.status,
        reason: ''
      },
      rulesPass: {
        reason: [
          { required: true, message: '不通过原因不能为空', trigger: 'blur' }
        ]
      },
      rulesForm: {
        user_name: [
          { required: true, message: '用户不能为空', trigger: 'blur' }
        ],
        phone: [
          {
            required: true, message: '手机不能为空', trigger: 'blur'
          }
        ]
      }
    }
  },
  methods: {
    onInput (val) {
      if (val.length <= 50 && val.length >= 0) {
        this.num = val.length
      } else {

      }
    },
    handleChange (value) {
      this.form.job = []
      // this.form.job = value[value.length - 1];
      if (value.length != 0) {
        value.map(item => {
          if (item.length != 0) {
            this.form.job.push(item[item.length - 1])
          }
          console.log('value-map=', item)
        })
        this.form.job = this.form.job.join(',')
      } else {
        this.form.job = ''
      }
      // ["17", "26", "27", "30", "32", "105", __ob__: Observer]

      console.log('提交时传的岗位id拼接起来的字符串=', this.form.job)
    },
    // 返回事件
    onBack () {
      this.$router.push('accountReview')
    },
    // 人员信息--->通过
    onPass (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          // this.job_value
          this.form.status = 2
          this.form.reason = this.formPass.reason
          AccountReviewApi.onJudgePass({
            params: this.form
          }).then((res) => {
            if (res.code == 0) {
              this.$message.success('操作成功!')
              this.$router.push('/accountReview')// 跳转
            } else {
              this.$message.fail(res.msg)
            }
          }).catch((error) => {
            console.log(error)
          })
        }
        console.log('valid=', valid)
      })
    },
    // 人员信息--->不通过
    onFail (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          this.dialogFormVisiblePa = true
        }
        console.log('valid=', valid)
      })
    },
    failCancel () {
      this.dialogFormVisiblePa = false
      this.formPass.reason = ''
      this.form.status = this.$route.query.status
      console.log('原始status=', this.form.status)
    },
    // 人员信息--->不通过弹框的提交
    failSure (data) {
      this.$refs[data].validate((valid) => {
        if (valid) {
          this.form.status = 3
          this.form.reason = this.formPass.reason
          AccountReviewApi.onJudgePass({
            params: this.form
          }).then((res) => {
            if (res.code == 0) {
              this.dialogFormVisiblePa = false
              this.$message.success('操作成功!')
              this.$router.push('/accountReview')// 跳转
            } else {
              this.$message.fail(res.msg)
            }
          }).catch((error) => {
            console.log(error)
          })
          console.log('valid=', valid)
        }
      })
    },
    // 获取用户的详情
    getUserDetail () {
      AccountReviewApi.getUserDetail({
        data: {
          user_reg_id: this.user_reg_id
        }
      }).then((res) => {
        this.form.user_name = res.data.user_name
        this.form.phone = res.data.phone
        //this.value = res.data.job_name;
        this.form.job = res.data.job_name
        this.formPass.reason = res.data.reason
      }).catch((error) => {
        console.log(error)
      })
    },

    // 获取标准码
    getStardandCode () {
      standardCodeApi.getStandardCodeData({
        data: {
          code_type: 'companyType'
        }
      }).then((res) => {
        this.typeArr = res.data.list
      }).catch((error) => {
        console.log(error)
      })
    },
    // 获取岗位级联数据
    getPostCascader () {
      AccountReviewApi.getPostCascader({
        data: {

        }
      }).then((res) => {
        this.options = res.data
      }).catch((error) => {
        console.log(error)
      })
    }
  },
  created () {
    // if (window.sessionStorage.getItem('access_token')) {
    if (window.localStorage.getItem('access_token')) {
      // 获取标准码
      this.getStardandCode()
      // 获取岗位级联数据
      this.getPostCascader()
    }
    if (this.$route.query.user_reg_id != undefined) {
      // 传用户id获取用户详情信息
      this.user_reg_id = this.$route.query.user_reg_id;[]
      this.getUserDetail()
    }
  },
  mounted () {

  }
}
</script>

<style lang="scss" scoped>
/deep/ .el-cascader {
  width: 100% !important;
}
.audit-style {
  font-family: "PingFang SC Bold", "PingFang SC";
  font-weight: 650;
  font-style: normal;
  font-size: 16px;
  color: rgba(0, 0, 0, 0.847058823529412);
  text-align: left;
  height: 60px;
  line-height: 60px;
  border-bottom: 1px solid #cccccc;
  padding-left: 20px;
}
.fail-style {
  border-color: red;
  color: red;
}
#personShenHe /deep/ .el-cascader {
  width: 100% !important;
}
.bottom-margin {
  text-align: center;
  margin-top: 20px;
}
/deep/ #unit-class .el-select {
  width: 100% !important;
}
/deep/ #relative-card .el-form-item__content {
  width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  display: -webkit-box !important;
  display: -ms-flexbox !important;
  display: flex !important;
  -webkit-box-pack: justify !important;
  -ms-flex-pack: justify !important;
  justify-content: flex-start !important;
}
/deep/ .el-form-item__content {
  width: 100% !important;
  margin: 0px !important;
  padding: 0px !important;
  display: flex !important;
  justify-content: space-between !important;
}
/deep/ #addr-class .el-select {
  width: 32% !important;
}
.img-upload {
  width: 178px;
  height: 178px;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  &:hover {
    border-color: #409eff;
  }
  .logo-uploader-icon {
    font-size: 28px;
    color: #8c939d;
    width: 178px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }
  .logo {
    width: 178px;
    height: 178px;
    display: block;
  }
}
.judge-bottom {
  text-align: center;
}
.auth-info {
  padding: 20px;
}
.mid-contain {
  margin-top: 20px;
}
.item-class {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}
/deep/ .el-form-item__content {
  width: 100% !important;
  margin: 0px !important;
}
</style>
